<template>
	<div id="user_info">
		<div class="top">
			<h3>管理我的账号</h3>
			<div class="user">
				<div class="img">
					<img :src="userInfo.headImg" width="100%" height="100%">
					<span class="iconfont icon-bianji"></span>
				</div>
				<p>{{ userInfo.nickName }}</p>
				<span>当前账号</span>
			</div>
		</div>
		<toptitle :conter="'个人资料'" :bgcolor="'#f00'"></toptitle>
		<itemUser :text="'昵称'" :border="true" :title=" userInfo.nickName" :to="'/users/user_info/revise'"></itemUser>
		<itemUser :text="'账号ID'" :border="true" :title="'3613'" :classleft="'icon-24gl-lock2'"></itemUser>
		<itemUser :text="'手机号码'" :border="true" :title="userInfo.loginPhone"></itemUser>
		<itemUser :text="'登录密码'" :border="true" :title="'修改登录密码'" :to="'/users/user_info/Change_Password'"></itemUser>
		<itemUser :text="'地址管理'" :border="true" :title="'立即前往'" :to="'/users/address'"></itemUser>
		<itemUser :text="'注销账号'" :border="true" :title="'账号注销后不能恢复'"></itemUser>
		<button @click="modal = true">退出登录</button>
		<Modal v-model="modal" title="提示" @on-ok="ok" @on-cancel="cancel">
			<p>确定退出登录吗？</p>
		</Modal>
	</div>
</template>

<script>
	import {
		loginOut
	} from '@/api/user'
	import itemUser from '@/components/itemUser.vue'
	import toptitle from '@/components/top_title.vue'
	export default {
		components: {
			itemUser,
			toptitle
		},
		data() {
			return {
				modal: false,
				// 用户数据
				userInfo: JSON.parse(localStorage.getItem('userInfo')),
			}
		},
		methods: {
			ok() {
				loginOut().then(res => {
					if (res.data.code == 1) {
						this.$Message.success('退出成功')
						/* 延迟1秒跳转 */
						setTimeout(() => {
							// 修改成功 , 跳转到登录页面
							this.$router.push({
								path: '/logon',
								replace: true
							})
							// 并删除token
							localStorage.removeItem("token");
							localStorage.removeItem("userInfo");
						}, 1000)
					}
				})
			},
			cancel() {
				this.$Message.info('取消退出');
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#user_info {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		padding-top: 44 * $width;

		.top {
			width: 100%;
			height: 150 * $width;
			background-color: #fff;
			margin-bottom: 10 * $width;
			padding: 15 * $width;

			h3 {
				font-size: 16 * $width;
				line-height: 40 * $width;
			}

			.user {
				width: 345 * $width;
				height: 80 * $width;
				border-radius: 10 * $width;
				background-color: #fdeae9;
				border: 1 * $width solid #ec5042;
				display: flex;
				align-items: center;
				overflow: hidden;

				.img {
					width: 48 * $width;
					height: 48 * $width;
					position: relative;

					img {
						border-radius: 50%;
					}

					span {
						display: inline-block;
						width: 18 * $width;
						height: 18 * $width;
						line-height: 18 * $width;
						text-align: center;
						border-radius: 50%;
						font-size: 13 * $width;
						font-weight: 600;
						border: 1 * $width solid #ec5042;
						color: #ec5042;
						background-color: #fff;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				p {
					margin-left: 10 * $width;
				}

				>span {
					position: relative;
					top: -29 * $width;
					right: -173 * $width;
					display: inline-block;
					width: 60 * $width;
					height: 20 * $width;
					font-size: 12 * $width;
					text-align: center;
					line-height: 20 * $width;
					color: #ea4233;
					background-color: #fbd7d5;
				}
			}
		}

		>p {
			width: 100%;
			height: .6rem;
		}

		button {
			width: 90%;
			height: 40 * $width;
			background-color: rgba(0, 0, 0, 0);
			border: 1 * $width solid #ec5042;
			border-radius: 20 * $width;
			margin: 20 * $width 5%;
			color: #ea4233;
		}
	}
</style>
